import CodeView from '../../../shared/components/CodeView';
import * as Base from './base/example';
import { getDisplayElementById } from '../../shared/helpers';

<div className="doc lead">
  Use Summary Detail to show and hide details while always showing a summary
</div>

<CodeView exampleOnly demoStyles="height: 150px;">
  {getDisplayElementById(Base.examples, 'open-with-complex-title')}
</CodeView>

## About Summary Detail
The summary detail component uses a button to show and hide content while showing an overall summary

## Base

<CodeView demoStyles="height: 150px;">
  {getDisplayElementById(Base.default)}
</CodeView>

## States

### Closed

<CodeView demoStyles="height: 150px;">
  {getDisplayElementById(Base.states, 'closed')}
</CodeView>

## Examples

### Closed with Complex title
<CodeView demoStyles="height: 150px;">
  {getDisplayElementById(Base.examples, 'closed-with-complex-title')}
</CodeView>

### Open with Complex title

<CodeView demoStyles="height: 150px;">
  {getDisplayElementById(Base.examples, 'open-with-complex-title')}
</CodeView>
